<template>
  <div class="app-container">

    <!--搜索部分-->
    <div class="search-box">
      <el-input
          v-model="queryParams"
          clearable
          placeholder="请输入搜索参数"
          @keyup.enter="handleQuery"
      >
        <template #prepend>搜索</template>
      </el-input>
      <el-button icon="Search" type="primary" @click="handleQuery">搜索</el-button>
      <el-button icon="Refresh" @click="resetQuery">重置</el-button>
    </div>

    <!--按钮组-->
    <div style="display: flex;flex-direction: row;justify-content: flex-start;align-items: center">
      <div class="search-box">
        <el-button
            icon="Plus"
            plain
            type="primary"
            @click="handleAdd"
        >新增
        </el-button>
        <el-button

            :disabled="single"
            icon="Edit"
            plain
            type="success"
            @click="handleUpdate"
        >修改
        </el-button>
        <el-button

            :disabled="multiple"
            icon="Delete"
            plain
            type="danger"
            @click="handleDelete"
        >删除
        </el-button>
      </div>
    </div>

    <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
      <el-table-column align="center" type="selection" width="55"/>
      <el-table-column align="center" label="ID" prop="id"/>
      <el-table-column align="center" label="货物状态" prop="productStatus"/>
      <el-table-column align="center" label="货物名称" prop="productName"/>
      <el-table-column align="center" label="货物描述" prop="productDescription"/>
      <el-table-column align="center" label="货物库存" prop="productInventory"/>
      <el-table-column align="center" label="货物单价" prop="productPrice"/>
      <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
        <template #default="scope">
          <el-button icon="Edit" link type="primary" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button icon="Delete" link type="primary" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!-- 添加或修改product对话框 -->
    <el-dialog v-model="open" :title="title" append-to-body width="500px">
      <el-form ref="productRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="货物名称" prop="productName">
          <el-input v-model="form.productName" placeholder="请输入货物名称"/>
        </el-form-item>
        <el-form-item label="货物描述" prop="productDescription">
          <el-input v-model="form.productDescription" placeholder="请输入货物描述"/>
        </el-form-item>
        <el-form-item label="货物库存" prop="productInventory">
          <el-input v-model="form.productInventory" placeholder="请输入货物库存"/>
        </el-form-item>
        <el-form-item label="货物单价" prop="productPrice">
          <el-input v-model="form.productPrice" placeholder="请输入货物单价"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script name="Detail" setup>
import {getCurrentInstance, reactive, ref} from "vue";

const {proxy} = getCurrentInstance();

const dataList = ref([]);
const open = ref(false);
const loading = ref(true);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const ids = ref([]);
const title = ref("");
const queryParams = ref('');
const form = reactive({});
const rules = reactive({
  productStatus: [
    {required: true, message: "货物状态不能为空", trigger: "change"}
  ],
  productName: [
    {required: true, message: "货物名称不能为空", trigger: "blur"}
  ],
  productInventory: [
    {required: true, message: "货物库存不能为空", trigger: "blur"}
  ],
  productPrice: [
    {required: true, message: "货物单价不能为空", trigger: "blur"}
  ]
});

const handleQuery = () => {
};
const handleAdd = () => {
}
const handleDelete = (row) => {
}
const handleUpdate = (row) => {
}
const submitForm = () => {
}
const resetQuery = () => {
  queryParams.value = '';
}
const cancel = () => {
  open.value = false;
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

</script>

<style scoped>@import "@/assets/ManagementPage.css";</style>
